<template>
	<view class="app">
		<!-- #ifdef MP-WEIXIN -->
		<collectionApplet></collectionApplet>
		<!-- #endif -->

		<view class="status-bar"></view>
		<view class="header">
			<view class="title">业务组件</view>
			<view class="message">让你的工作如虎添翼</view>
		</view>
		<view class="content">
			<view v-for="(card,index) in cardList" :key="index" class="card-page">
				<pageCard :card="card" />
			</view>
			<view v-if="fillBlanks" class="card-page"></view>
		</view>
		<!-- #ifdef H5 -->
		<view style="height: 120rpx;"></view>
		<!-- #endif -->
		<!-- #ifdef MP -->
		<view style="height: 40rpx;"></view>
		<!-- #endif -->
	</view>
</template>

<script>
	import pageCard from '@/components/page-card'
	import collectionApplet from '@/components/collectionApplet'
	export default {
		components: {
			pageCard,
			collectionApplet
		},
		computed: {
			fillBlanks() {
				return this.cardList.length % 2 === 1;
			}
		},
		data() {
			return {
				cardList: [{
						color: '#009A69',
						text: '滚动通知',
						icon: 'icon-gundong',
						english: 'NoticeBar',
						page: '/pages/business/noticeBar/index'
					},
					{
						color: '#CF349E',
						text: '时间轴',
						icon: 'icon-timeAxis',
						english: 'TimeLine',
						page: '/pages/business/timeLine/index'
					},
					{
						color: '#6BC939',
						text: '骨架屏',
						icon: 'icon-layoutForm',
						english: 'Skeleton',
						page: '/pages/business/skeleton/index'
					},
					{
						color: '#EB6256',
						text: '下拉菜单',
						icon: 'icon-xialaxuanze',
						english: 'Dropdown',
						page: '/pages/business/dropdown/index'
					},
					{
						color: '#EC5F8A',
						text: '导航栏',
						icon: 'icon-3zhuangtailan',
						english: 'Navbar',
						page: '/pages/business/navbar/index'
					},
					{
						color: '#5CA7BA',
						text: '步骤条',
						icon: 'icon-shenpi',
						english: 'Steps',
						page: '/pages/business/stepBar/index'
					},
					{
						color: '#2796DB',
						text: '信息输入框',
						icon: 'icon-yanzhengma',
						english: 'MessageInput',
						page: '/pages/business/messageInput/index'
					},
					{
						color: '#A477E2',
						text: '加载更多',
						icon: 'icon-jiazai',
						english: 'loadMore',
						page: '/pages/business/loadMore/index'
					},
					{
						color: '#9c678a',
						text: '阅读更多',
						icon: 'icon-yuedu',
						english: 'ReadMore',
						page: '/pages/business/readMore/index'
					},
					{
						color: '#F4AA6D',
						text: '侧边导航',
						icon: 'icon-sidebarcebianlan',
						english: 'Sidebar',
						page: '/pages/business/sidebar/index'
					},
					{
						color: '#E56476',
						text: '滑块验证',
						icon: 'icon-icon-huakuai',
						english: 'SliderValidate',
						page: '/pages/business/sliderValidate/index'
					},
					{
						color: '#c78381',
						text: '搜索框',
						icon: 'icon-search',
						english: 'Search',
						page: '/pages/business/search/index'
					},
					{
						color: '#F173AC',
						text: '评分',
						icon: 'icon-wuidemo-score',
						english: 'Rate',
						page: '/pages/business/rate/index'
					},
					{
						color: '#5cabf1',
						text: '索引栏',
						icon: 'icon-leimupinleifenleileibie',
						english: 'IndexBar',
						page: '/pages/business/indexBar/index'
					},
					// {
					// 	color: '#122E29',
					// 	text: '签名画板',
					// 	icon: 'icon-qianming',
					// 	english: 'CanvasSign',
					// 	page: ''
					// }
				]
			}
		},
	}
</script>

<style lang="scss" scoped>
	.status-bar {
		height: var(--status-bar-height);
		background-color: #ff8147;
	}

	.header {
		padding: 80rpx 60rpx;
		background-color: #ff8147;
		color: #fff;
		background-image: url(/static/images/wave.png);
		background-size: 100% 100%;

		.title {
			font-size: 42rpx;
			font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
			margin-bottom: 20rpx;
		}
	}



	.content {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;

		.card-page {
			margin-top: 30rpx;
			width: 44%;
		}
	}
</style>
